<template>
    <div class="wapper">
        <el-card style="width: 500px">
            <template #header class="header">
                <el-icon class="header" style="size: 20px;">
                    <User />
                </el-icon>
                <span class="header">注册</span>
            </template>

            <el-form :model="formData" label-width="auto" :rules="rules" ref="formRef" style="max-width: 450px">
                <el-form-item label="手机号" prop="tel">
                    <el-input v-model="formData.tel" />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input  v-model="formData.code">
                    <template #append>
                        <el-button type="primary" @click="getCode">获取验证码</el-button>
                    </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="psd">
                    <el-input  v-model="formData.psd"  show-password />
                </el-form-item>
                <el-form-item label="确认密码" prop="psd2">
                    <el-input  v-model="formData.psd2" show-password />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input  v-model="formData.email" />
                </el-form-item>
                <el-form-item label="昵称" prop="nikeName">
                    <el-input  v-model="formData.nikeName" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onCheckAndSubmit(formRef)">注册</el-button>
                    <el-button @click="resetForm(formRef)">重置</el-button>
                </el-form-item>

            </el-form>
            <template #footer>
                <a href="/user/login">以有账户?去登录</a>
            </template>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'
import userApi from '@/api/userApi';
import { useRouter }  from 'vue-router'
import { Md5 } from 'ts-md5';



const router = useRouter()

//const name =ref();

const formData = reactive({
    tel: '13295567896',
    code: "",
    psd: "By123456",
    psd2: "",
    email: "3109928074@qq.com",
    nikeName: "ling"
})

const formRef = ref();

const getCode = () =>{
     userApi.sendCode({ email: formData.email }).then((res: any) => {
        ElMessage.success("验证码发送成功")
    })

}

const rules = reactive<any>({
    tel: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号格式不正确', trigger: 'blur'}
    ],
    /*code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { pattern:/^\d{4}$/, message: '验证码不正确', trigger: 'blur'}
    ],*/
    psd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern:/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, message: '(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)', trigger: 'blur'}
    ],
    psd2: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern:/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, message: '(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)', trigger: 'blur'}
    ],
    email: [
        { pattern:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '(Email地址不正确)', trigger: 'blur'}
    ],
    nikeName: [
        { required: true, message: '请输入昵称', trigger: 'blur' }
    ]

})



const onsubmit =() =>{
    if(formData.psd !=formData.psd2){
        ElMessage.error('两次密码不同')
        return
    }

    const md5Pwd=Md5.hashStr(formData.psd).toUpperCase();
    let body = {
        tel: formData.tel,
        email:formData.email,
        nickname:formData.nikeName,
        password:md5Pwd,
        code:formData.code,
    }
    userApi.register(body).then((res:any) =>{
        ElMessage.success('注册成功')
        setTimeout(() => {
            router.push({ name: "user-login" })
        }, 1000)
    })
        console.log('验证成功',formData)
    }

    

const  onCheckAndSubmit = async (formEl: any) => {

  await formEl.validate((valid:any, fields:any) => {
    if (valid) {
     onsubmit()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: any) => {
    formEl.resetFields()
}



</script>

<style scoped>
.wapper {
    background-image: url("/public\xi.jpg");
    background-size: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header {
    color: #66ccff;
    font-weight: 600;

}
</style>